'use strict';

const xhr2 = new XMLHttpRequest();
let cl = document.querySelector('.cl');

class LayzBox {
    lazyLoad() {
        this.flag = true;
        window.onscroll = () => {
            if (cl.lastElementChild.offsetTop - window.scrollY <= 450 && this.flag === true) {
                this.flag = false;
                this.start = parseInt(cl.lastElementChild.getAttribute('data-index')) + 1;
                this.end = this.start + 6;
                this.promise = new Promise((resolve, reject) => {
                    xhr2.open('get', `/upload/webDemo/pages?start=${this.start}&end=${this.end}`, true);
                    xhr2.send();
                    xhr2.onreadystatechange = () => {
                        if (xhr2.readyState === 4 && xhr2.status === 200) {
                            if (xhr2.responseText === 'no') {
                                alert('加载失败！');
                                return;
                            }
                            let arr = JSON.parse(xhr2.responseText);
                            for (let i = this.start - this.start; i < arr.length; i++) {
                                if (arr[i]) {
                                    cl.innerHTML += `<article data-index="${i + this.start}">
                                    <div data-mov="false">
                                        <img src="${arr[i].imgUrlBase64}" alt="">
                                    </div>
                                    <h3><a href="#">${arr[i].title}</a></h3>
                                    <p class="description" title="${arr[i].context}">${arr[i].context}</p>
                                    <p class="date">${arr[i].update}</p>
                                   </article>`;
                                }
                                resolve();
                            }
                        }
                    }
                })
                this.promise.then((value) => {
                    this.flag = true;
                }).catch((reason) => {
                    console.error(reason);
                })
            }
        }
    }
}

const lazyBox = new LayzBox();

window.addEventListener('load', () => {
    let promise = new Promise((resolve, reject) => {
        xhr2.open('get', `/upload/webDemo/pages?start=0&end=9`, true);
        xhr2.send();
        xhr2.onreadystatechange = () => {
            if (xhr2.readyState === 4 && xhr2.status === 200) {
                if (xhr2.responseText === 'no') {
                    alert('加载失败！');
                    return;
                }
                let arr = JSON.parse(xhr2.responseText);
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i]) {
                        cl.innerHTML += `<article data-index="${i}">
                        <div data-mov="false">
                            <img src="${arr[i].imgUrlBase64}" alt="">
                        </div>
                        <h3><a href="${arr[i].aHref}" target="_blank">${arr[i].title}</a></h3>
                        <p class="description" title="${arr[i].context}">${arr[i].context}</p>
                        <p class="date">${arr[i].update}</p>
                       </article>`;
                    }
                    resolve();
                }
            }
        }
    })
    promise.then((value) => {
        lazyBox.lazyLoad();
    }).catch((reason) => {
        console.error(reason);
    })
})